import { Box, Table, TableBody, TableCell, TableHead, TableRow, Typography } from '@mui/material';

import Transaction from '../../api/transaction/transaction';
import NumberTool from '../../libs/number-tool';
import { getTokenIcon } from '../../libs/utilities';
import GFSTable from '../shared/tables/gfs-table';

interface Props {
    transactions: Array<TransactionsWithError>;
    token: string;
}

export interface TransactionsWithError {
    transaction: Transaction;
    error: string;
}

export default function HomeReviewCSVWithError(props: Props) {
    return (
        <GFSTable>
            <Table sx={{ minWidth: 650 }} aria-label="simple table">
                <TableHead>
                    <TableRow>
                        <TableCell align="center">#</TableCell>
                        <TableCell align="center">Name</TableCell>
                        <TableCell align="center">Wallet Address</TableCell>
                        <TableCell align="center">Amount</TableCell>
                        <TableCell align="center">Email</TableCell>
                        <TableCell align="center">Error</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {props.transactions.map((transaction, index) => (
                        <TableRow
                            key={index}
                            sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                        >
                            <TableCell component="th" scope="row" align="center">
                                {index + 1}.
                            </TableCell>
                            <TableCell align="center">{transaction.transaction.name}</TableCell>
                            <TableCell align="center">
                                {transaction.transaction.walletAddress}
                            </TableCell>
                            <TableCell align="center">
                                {NumberTool.format(transaction.transaction.amount, props.token)}{' '}
                                {props.token}
                                <Box
                                    component="img"
                                    sx={{
                                        height: 15,
                                        width: 15,
                                        marginLeft: '0.3rem'
                                    }}
                                    alt="Icon"
                                    src={getTokenIcon(props.token)}
                                />
                            </TableCell>
                            <TableCell align="center">{transaction.transaction.email}</TableCell>
                            <TableCell align="center">
                                <Typography
                                    variant="body2"
                                    sx={{
                                        color: 'var(--color-negative)'
                                    }}
                                >
                                    {transaction.error}
                                </Typography>
                            </TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </GFSTable>
    );
}
